<link rel="stylesheet" href="/css/jqueryCss/sliderCollection.css">
<div class="slider-collection-wrapper">
    <div class="first-example-wrapper">
        <div class="first-example-wrapper-inner">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>
    <div class="two-example-wrapper">
        <div class="two-example-wrapper-inner">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>
    <div class="last-example-wrapper">
        <div class="last-example-wrapper-inner">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <span class="arrow arrow-left"></span>
            <span class="arrow arrow-right"></span>
        </div>
    </div>
</div>
</div>

<script>
    ! function(window, document, $, undefined) {
        let autoSlider = ({
            $target = null,
            len = 'outerWidth',
            styleName = "marginLeft",
            sliderTime = 2000
        }) => {
            let timer = null;
            let $sliderTarget = $target.find('ul');
            let size = $sliderTarget.find('li')[len]();

            let initSLider = () => {
                timer = setInterval(() => {
                    $sliderTarget.animate({
                        [styleName]: -size
                    }, 300, function() {
                        $(this)
                            .append($(this).find('li:first'))
                            .css(styleName, 0)
                    })
                }, sliderTime)
            }
            initSLider()
            $target.hover(() => {
                clearInterval(timer)
            }, initSLider)
        }
        autoSlider({
            $target: $('.first-example-wrapper-inner'),
            len: 'outerHeight',
            styleName: 'marginTop',
            sliderTime: 1000
        })

        autoSlider({
            $target: $('.two-example-wrapper-inner')
        })


        function lastRunSlider() {
            let $target = $('.last-example-wrapper-inner');
            let $slider = $target.find('ul')
            let width = $slider.find('li').outerWidth()
            let $arrow = $('.arrow')

            $arrow.on('click', function() {
                let $this = $(this)
                if ($this.hasClass('arrow-right')) {
                    $slider.animate({
                        'marginLeft': -width
                    }, 300, function() {
                        $(this).css({
                            'marginLeft': 0
                        }).append($(this).find('li:first'))
                    })
                } else {
                    console.log('自己写吧');
                }
            })



        }

        lastRunSlider()

    }(window, document, jQuery)
</script>